<template>
  <Transition name="toast-slide">
    <div v-if="visible" class="toast-container">
      <div 
        class="toast" 
        :class="[`toast-${type}`]"
      >
        <!-- 左侧图标 -->
        <div class="toast-icon">
          <span v-if="type === 'success'" class="icon-check">✓</span>
          <span v-else-if="type === 'error'" class="icon-error">✕</span>
          <span v-else-if="type === 'warning'" class="icon-warning">⚠</span>
          <span v-else class="icon-info">ℹ</span>
        </div>
        
        <!-- 中间内容 -->
        <div class="toast-content">
          <div class="toast-message">{{ message }}</div>
          <div v-if="showTimestamp" class="toast-timestamp">{{ timestamp }}</div>
        </div>
        
        <!-- 右侧关闭按钮 -->
        <button 
          class="toast-close"
          @click="handleClose"
          aria-label="关闭"
        >
          ✕
        </button>
      </div>
    </div>
  </Transition>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  message: {
    type: String,
    required: true
  },
  type: {
    type: String,
    default: 'success', // success, error, warning, info
    validator: (value) => ['success', 'error', 'warning', 'info'].includes(value)
  },
  duration: {
    type: Number,
    default: 3000 // 自动关闭时间（毫秒），0表示不自动关闭
  },
  showTimestamp: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['close'])

const visible = ref(false)
let autoCloseTimer = null

// 格式化时间戳
const timestamp = ref('')

const formatTimestamp = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  timestamp.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

// 显示
const show = () => {
  formatTimestamp()
  visible.value = true
  
  // 设置自动关闭
  if (props.duration > 0) {
    autoCloseTimer = setTimeout(() => {
      handleClose()
    }, props.duration)
  }
}

// 关闭
const handleClose = () => {
  if (autoCloseTimer) {
    clearTimeout(autoCloseTimer)
    autoCloseTimer = null
  }
  visible.value = false
  setTimeout(() => {
    emit('close')
  }, 300) // 等待动画完成
}

onMounted(() => {
  show()
})

// 暴露方法
defineExpose({
  show,
  close: handleClose
})
</script>

<style scoped>
.toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  pointer-events: none;
}

.toast {
  pointer-events: all;
  background: #363636;
  border: 2px solid;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 320px;
  max-width: 500px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.toast-success {
  border-color: #70B04A;
}

.toast-error {
  border-color: #E74C3C;
}

.toast-warning {
  border-color: #F39C12;
}

.toast-info {
  border-color: #3498DB;
}

.toast-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  font-weight: bold;
}

.toast-success .toast-icon {
  background: #70B04A;
  color: white;
}

.toast-error .toast-icon {
  background: #E74C3C;
  color: white;
}

.toast-warning .toast-icon {
  background: #F39C12;
  color: white;
}

.toast-info .toast-icon {
  background: #3498DB;
  color: white;
}

.toast-content {
  flex: 1;
  min-width: 0;
}

.toast-message {
  color: #D0D0D0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 4px;
}

.toast-timestamp {
  color: #999;
  font-size: 12px;
  line-height: 1.2;
}

.toast-close {
  background: transparent;
  border: none;
  color: #999;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
  font-size: 16px;
  padding: 0;
  transition: all 0.2s;
}

.toast-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #D0D0D0;
}

/* 动画效果 */
.toast-slide-enter-active {
  animation: slideDown 0.3s ease-out;
}

.toast-slide-leave-active {
  animation: slideUp 0.3s ease-in;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-50px);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .toast {
    min-width: 280px;
    max-width: 90%;
    padding: 10px 14px;
  }
  
  .toast-message {
    font-size: 14px;
  }
  
  .toast-timestamp {
    font-size: 11px;
  }
}
</style>

